<template>
  <div>
    <div>
      <div style="width: 100px; height: 100px">
        <el-image
          style="width: 80px; height: 80px; border: 1px solid #cccccc"
          :src="store.storeIcon"
          fit="contain"
          align="center"
        ></el-image>
      </div>
      <span class="tip">店铺名：</span>
      <span class="content">{{store.storeName}}</span>
    </div>
    <br />

    <span class="tip">描述：</span>
    <span class="content">{{store.storeDesc}}</span>
    <br />
    <br />
    
    <span class="tip">地址：</span>
    <span class="content">{{store.storeLocation}}&nbsp;&nbsp;{{store.storeAddress}}</span>
    <br />
    <br />
    
    <span class="tip">联系手机号码：</span>
    <span class="content">{{store.storePhone}}</span>
    <br />
    <br />

    <span class="tip">店铺信誉分数：</span>
    <span class="content">{{store.storeIntegrity}}</span>
    <br />
    <br />

    <el-button type="primary" @click="back()" plain>返回</el-button>
    <el-button type="primary">去店里看看</el-button>
  </div>
</template>

<script>
export default {
  name: "CollectDetail",
  data() {
    return {
      store: {},
    };
  },
  methods: {
    init(store) {
      this.store = store;
    },
    back() {
      this.$emit("back");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
